<template>
  <div class="content">
    <section v-if="show">
      <ul>
        <li v-for="(item,index) in msg" :key="index">
          <div class="top">
            <div class="left">
              <div class="img">
                <img src="../../assets/pic3.jpg" alt="" />
              </div>
              <div class="par">
                <div class="par-t">
                  <p class="name">{{item.name}}</p>
                  <p>{{item.sel}}</p>
                </div>
                <div class="par-b">12月05日发货</div>
              </div>
            </div>
            <div class="right">
              <div class="r-top">￥{{(item.price/100)}}</div>
              <div class="r-bot">x{{item.num}}</div>
            </div>
          </div>
          <div class="bot">
            <div class="b-top">
              <span>实付款￥{{(item.price/100 * item.num)}}</span>
            </div>
            <div class="b-bot">
              <div class="b-bot-ul">
                <div class="item">延长收货</div>
                <div class="item">查看物流</div>
                <div class="item active">确认收货</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>
    <div class="empty" v-if="!show">
      <img src="../../assets/noorder.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["msg"],
  data() {
    return {
      show: true,
      list:this.msg,
    };
  },
  methods: {
    //子组件获取父组件值的方法
  },
  watch:{
    msg:function(newValue,oldValue){
      // console.log(newValue);
      this.list = newValue;
      if(newValue==null){
        this.show=false
      }
      
    }
  },
  mounted(){
    console.log(this.list);
  }
};
</script>
<style lang="scss" scoped>
@import "@/static/css/base.scss";
@import "@/static/componentscss/content.scss";
</style>